diff options
Diffstat (limited to 'src/routes/projects/[id]/+page.svelte')
| -rw-r--r-- | src/routes/projects/[id]/+page.svelte | 27 |
1 files changed, 7 insertions, 20 deletions
diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte index 3d1aafe..e324f45 100644 --- a/src/routes/projects/[id]/+page.svelte +++ b/src/routes/projects/[id]/+page.svelte @@ -1,10 +1,11 @@ <script lang="ts"> import { enhance } from '$app/forms'; import { matchItems } from '$lib/components/fuzzy-search'; + import ScoreBadge from '$lib/components/ScoreBadge.svelte'; + import StatusBadge from '$lib/components/StatusBadge.svelte'; import { formatFrequency, parseIntervalToDays, - STATUS_LABELS, type RoutineState, } from '$lib/shared/routine-metrics'; @@ -44,25 +45,12 @@ editName = routine.name; editFrequency = `${routine.frequencyDays}d`; } - - function scoreClass(score: number): string { - if (score >= 80) return 'score bg-success'; - if (score >= 50) return 'score bg-accent'; - return 'score bg-danger'; - } - - function statusClass(status: RoutineState['status']): string { - if (status === 'ok') return 'status bg-success text-white'; - if (status === 'due') return 'status bg-accent-soft text-accent'; - if (status === 'late') return 'status bg-accent text-white'; - return 'status bg-danger text-white'; - } </script> <main> <header class="page-header"> <h1>{data.project.name}</h1> - <span class={scoreClass(data.healthScore)}>{data.healthScore}</span> + <ScoreBadge score={data.healthScore} /> </header> <form @@ -183,11 +171,10 @@ {/if} </span> </div> - <span class={statusClass(routine.status)}> - {STATUS_LABELS[routine.status]} - {#if routine.overdueDays > 0}({routine.overdueDays} - j){/if} - </span> + <StatusBadge + status={routine.status} + overdueDays={routine.overdueDays} + /> <form method="POST" action="?/complete" use:enhance> <input type="hidden" name="id" value={routine.id} /> <button class="btn-done" type="submit">Fait</button> |